@import 'public.css';

@import 'http://at.alicdn.com/t/font_97og5j7hsdk21emi.css';



.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} 
.clearfloat{zoom:1} 





@mixin clearfloat {
	zoom:1;
	&:after{
		display:block;clear:both;content:"";visibility:hidden;height:0
	}
}

@mixin ListBackgroundImg {
	background-image: url(../images/right.png);
	background-position: 94% center;
	background-repeat: no-repeat;
	background-size: 15px 33px;
}



@mixin line-clamp ($line) {
	overflow : hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	word-break:break-all ;
	-webkit-line-clamp: $line;
	-webkit-box-orient: vertical;
}
$themeColor: #ff8484;

div#shareCon{
	position: fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;
	background-color:rgba(0,0,0,0.5);
	z-index: 999;
	display:none;
}

#MaxCon{
	width:750px;
	height:100%;
	position: relative;
	background-size:100% 1207px;
	background-repeat:no-repeat;
}


@keyframes pageOneAnimation {
	0% {transform: scale(1);}
	50% {transform: scale(1.1);}
	100% {transform: scale(1);}
}

.pageOne{
	background-image:url(../images/pageOne.jpg);
	background-color:#000;


	div.imgC{
		position: absolute;
		top: 225px;
		left: 0;
		z-index: 99;
		transform: translateX(750px);


	}
	div.imgCActive{
		transform: translateX(0px);
		transition: all 0.7s 0.3s;
	}

	a.start{
		display: block;
		width: 291px;
		height: 47px;
		position: absolute;
		bottom: 87px;
		left: 50%;
		margin-left: - 145px;
		animation: pageOneAnimation 3s infinite;
	}
}

.pageTwo{
	background-image:url(../images/pageTwo.jpg);
	background-color:#000;

	a.next{
		display: block;
		width: 188px;
		height: 36px;
		position: absolute;
		bottom: 90px;
		left: 50%;
		margin-left: -94px;
		animation: pageOneAnimation 3s infinite;
	}
}


.pageThree{
	background-image:url(../images/pageThree.jpg);
	user-select:none;
	background-color:#fdfdff;

	div.timeCon{
		width: 100%;
		position: relative;
		top:90px;
		left: 0;
		line-height: 60px;
		font-size: 40px;
		height: 60px;
		color: #000;
		text-align: center;
		// font-family:"HelveticaNeueLTCom";
	}

	div.dialPlate{
		width: 475px;
		height: 537px;
		position: absolute;
		bottom:45px;
		left: 50%;
		margin-left: -237px;
		z-index: 99;
		background-image:url(../images/dialPlate.png);
		div.pointer{
			background-image: url(../images/pointer.png);
			width: 32px;
			height: 233px;
			position: absolute;
			top: 50px;
			left: 50%;
			margin-left: -16px;
			transform-origin:17px 189px;
			transform: rotate(-120deg)
		}

		div.button{
			width: 168px;
			height:169px;
			background-image: url(../images/button.png);
			position: absolute;
			bottom:16px;
			left: 50%;
			margin-left: -83px;
			text-align: center;
			line-height: 169px;
			color: #fff;
			font-size: 20px;
			letter-spacing:4px;
		}
		div.buttonAct{
			background-image: url(../images/buttonHover.png);
		}

	}
	
}



.pageFour{
	background-image:url(../images/pageFour.jpg);
	padding-top:100px;
	background-color:#151412;

	div.title{
		width: 100%;
		height: 80px;
		line-height: 80px;
		font-size: 30px;
		color: #fff;
		text-align: center;
		font-family: 'Porsche News Gothic';


	}
	a.linkMo{
		display: inline-block;
		text-decoration: underline;
		color: #fff;
		font-size: 26px;
		margin-top: 30px;
		font-family: 'Porsche News Gothic';
		
	}
	div.time{
		text-align: center;
		line-height: 90px;
		font-size: 52px;
		height: 90px;
		color:#fff;
		span#timeCon{
			font-family:"PORSCHEMOTORSPORTEXTENDED";
		}
		span.miao{
			font-size: 32px;
			margin-left: 10px;
		}
	}
	div.centerInfo{
		padding-top:40px;
		text-align: center;
		color: #fff;
		font-family: 'Porsche News Gothic';

		div.head{
			font-size: 48px;
			line-height: 60px;
			font-family: 'Porsche News Gothic';

		}
		div.info{
			margin-top: 10px;
			font-size: 26px;
			font-family: 'Porsche News Gothic';

			line-height: 40px;

			>a{
				text-decoration: underline;
				font-family: 'Porsche News Gothic';

				color: #fff;
			}

		}

		div.sign{
			background-image:url(../images/alert.png);
			width: 410px;
			height: 183px;
			line-height: 183px;
			transform: rotate(-20deg);
			font-size: 40px;
			margin:80px auto;
		}
	}
	div.btnCon{
		padding-top:30px;
		width: 100%;
		text-align: center;

		>a{
			margin:0 10px;
			display: inline-block;
			width: 280px;
			height: 96px;
			border:2px solid #fff;
			text-align: center;
			line-height: 92px;
			font-size: 30px;
			color:#fff;
			font-family: 'Porsche News Gothic';

			i{
				font-size: 36px;
				margin-right: 10px;
			}
		}
		>a.act{
			background-color:#fff;
			color: #000;
		}
	}
}